<!--
  ~ Copyright (c) 2014-2021 Bjoern Kimminich & the OWASP Juice Shop contributors.
  ~ SPDX-License-Identifier: MIT
  -->

<mat-toolbar class="mat-elevation-z6" color="primary" fxLayout="column" xmlns="http://www.w3.org/1999/html">

  <mat-toolbar-row fxLayout="row">

    <button (click)="onToggleSidenav()" mat-button style="height:48px; width: 48px;" aria-label="Open Sidenav"
            matTooltip="{{ 'SIDENAV_HINT' | translate }}" matTooltipPosition="below">
      <mat-icon>menu</mat-icon>
    </button>

    <button mat-button routerLink="/search" style="height:60px;" class="buttons" aria-label="Back to homepage">
      <img [src]="logoSrc" class="logo" alt={{applicationName}}>
      <span fxHide.lt-sm fxShow style="font-size: x-large"> {{applicationName}} </span>
    </button>

    <span class="fill-remaining-space"></span>

    <mat-search-bar #searchControl id="searchQuery" (onEnter)="search(searchControl.value)"
                    aria-label="Click to search"></mat-search-bar>

    <button [matMenuTriggerFor]="userMenu" mat-button style="vertical-align: middle; height:48px;" class="buttons"
            fxHide.lt-md fxShow aria-label="Show/hide account menu" id="navbarAccount">
      <i class="material-icons">
        account_circle
      </i>
      <span> {{"ACCOUNT" | translate}} </span>
    </button>

    <mat-menu #userMenu="matMenu">
      <button *ngIf="!isLoggedIn()" mat-menu-item routerLink="/login" aria-label="Go to login page"
              id="navbarLoginButton">
        <mat-icon>
          exit_to_app
        </mat-icon>
        <span>
          {{"TITLE_LOGIN" | translate }}
        </span>
      </button>
      <button (click)="goToProfilePage()" *ngIf="isLoggedIn()" mat-menu-item aria-label="Go to user profile">
        <mat-icon>
          account_circle
        </mat-icon>
        <span>
          {{userEmail}}
        </span>
      </button>
      <button *ngIf="isLoggedIn() && isAccounting()" mat-menu-item routerLink="/accounting"
              aria-label="Go to accounting page">
        <mat-icon>
          account_balance
        </mat-icon>
        <span>
          {{"ACCOUNTING" | translate}}
        </span>
      </button>
      <button mat-menu-item *ngIf="isLoggedIn()" [matMenuTriggerFor]="ordersSubMenu"
              aria-label="Show Orders and Payment Menu">
        <mat-icon>
          check_circle_outline
        </mat-icon>
        <span>
          {{ "ORDERS_AND_PAYMENT" | translate }}
        </span>
      </button>
      <button mat-menu-item *ngIf="isLoggedIn()" [matMenuTriggerFor]="privacySubMenu"
              aria-label="Show Privacy and Security Menu">
        <mat-icon>
          security
        </mat-icon>
        <span>
          {{ "PRIVACY_AND_SECURITY" | translate }}
        </span>
      </button>
      <button (click)="logout()" *ngIf="isLoggedIn()" mat-menu-item aria-label="Logout" id="navbarLogoutButton">
        <mat-icon>
          power_settings_new
        </mat-icon>
        <span>
          {{"TITLE_LOGOUT" | translate }}
        </span>
      </button>
    </mat-menu>

    <button *ngIf="isLoggedIn()" mat-button routerLink="/basket" style="height:48px;" class="buttons"
            aria-label="Show the shopping cart">
      <mat-icon>
        shopping_cart
      </mat-icon>
      <span fxHide.lt-md fxShow> {{"TITLE_BASKET" | translate}}</span>
      <span class="fa-layers-counter fa-layers-top-right fa-3x warn-notification"
            style="font-size: 47px;">{{itemTotal}}</span>
    </button>

    <button [matMenuTriggerFor]="menu" mat-button style="height:48px; width: 48px;" class="buttons"
            aria-label="Language selection menu"
            matTooltip="{{ 'LANGUAGE_SEL_HINT' | translate }}" matTooltipPosition="below">
      <mat-icon>
        language
      </mat-icon>
      <span fxHide.lt-md fxShow> {{shortKeyLang}} </span>
    </button>

    <mat-menu #menu="matMenu" [overlapTrigger]="true">
      <mat-radio-button (click)="changeLanguage(language.key)" *ngFor="let language of languages" [value]="language"
                        class="mat-menu-item" style="width: 240px;" checked="{{selectedLanguage === language}}"
                        aria-label="{{language.lang}}">
        <div style="display: inline-block; width: 200px; margin-left: 5px;">
          <span *ngFor="let icon of language.icons" [class]="'flag-icon flag-icon-' + icon"></span>
          {{language?.lang}}
        </div>
        <i
          [class]="'fas fa-thermometer-' + language.gauge + (language.percentage > 70 ? ' confirmation' : ' error')">
        </i>
      </mat-radio-button>
    </mat-menu>

    <mat-menu #privacySubMenu="matMenu">
      <button mat-menu-item [routerLink]="['privacy-security/privacy-policy']" aria-label="Go to privacy policy page">
        <mat-icon>
          assignment
        </mat-icon>
        <span translate>TITLE_PRIVACY_POLICY</span>
      </button>
      <button mat-menu-item [routerLink]="['privacy-security/data-export']" aria-label="Go to data export page">
        <mat-icon>
          get_app
        </mat-icon>
        <span translate>TITLE_REQUEST_DATA_EXPORT</span>
      </button>
      <button mat-menu-item (click) = "goToDataErasurePage()" aria-label="Go to data subject page">
        <mat-icon>
          delete_forever
        </mat-icon>
        <span translate>DATA_SUBJECT_TITLE</span>
      </button>
      <mat-divider></mat-divider>
      <button mat-menu-item [routerLink]="['privacy-security/change-password']" aria-label="Go to change password page">
        <mat-icon>
          edit
        </mat-icon>
        <span translate>TITLE_CHANGE_PASSWORD</span>
      </button>
      <button mat-menu-item [routerLink]="['privacy-security/two-factor-authentication']"
              aria-label="Go to two factor authentication page">
        <mat-icon>
          exposure_plus_2
        </mat-icon>
        <span translate>TITLE_TWO_FACTOR_AUTH_CONFIG</span>
      </button>
      <button mat-menu-item [routerLink]="['privacy-security/last-login-ip']" aria-label="Go to last login ip page">
        <mat-icon>
          place
        </mat-icon>
        <span translate>LAST_LOGIN_IP</span>
      </button>
    </mat-menu>

    <mat-menu #ordersSubMenu="matMenu">
      <button mat-menu-item routerLink="/order-history" aria-label="Go to order history page">
        <mat-icon>
          archive
        </mat-icon>
        <span>
          {{"LABEL_ORDER_HISTORY" | translate}}
        </span>
      </button>
      <button mat-menu-item routerLink="/recycle" aria-label="Go to recycling page">
        <mat-icon>
          autorenew
        </mat-icon>
        <span>
          {{"NAV_RECYCLE" | translate}}
        </span>
      </button>
      <mat-divider></mat-divider>
      <button *ngIf="isLoggedIn()" mat-menu-item routerLink="/address/saved" aria-label="Go to saved address page">
        <mat-icon>
          my_location
        </mat-icon>
        <span>
          {{"MY_SAVED_ADRESSES" | translate}}
        </span>
      </button>
      <button *ngIf="isLoggedIn()" mat-menu-item routerLink="/saved-payment-methods"
              aria-label="Go to saved payment methods page">
        <mat-icon>
          credit_card
        </mat-icon>
        <span>
          {{"MY_PAYMENT_OPTIONS" | translate}}
        </span>
      </button>
      <button *ngIf="isLoggedIn()" mat-menu-item routerLink="/wallet" aria-label="Go to wallet page">
        <mat-icon>
          account_balance_wallet
        </mat-icon>
        <span>
          {{"DIGITAL_WALLET" | translate}}
        </span>
      </button>

    </mat-menu>

  </mat-toolbar-row>
</mat-toolbar>
